//
// Width and height
//

// Auto
.h-auto {
  height: auto !important;
}

.w-auto {
  width: auto !important;
}

// Responsive widths
@each $name, $value in $heights-and-widths {
  // Height
  .w-#{$name} {
    width: $value !important;
  }

  // Width
  .h-#{$name} {
    height: $value !important;
  }

  // Min width
  .min-w-#{$name} {
    min-width: $value !important;
  }

  // Min
  .min-h-#{$name} {
    min-height: $value !important;
  }

  .max-h-#{$name} {
    max-height: $value !important;
  }

  .max-w-#{$name} {
    max-width: $value !important;
  }
}
